// src/components/ModelIntroductionCard/ModelIntroductionCard.tsx
import React, { useState } from 'react';
import './ModelIntroductionCard.css';

interface ModelIntroductionCardProps {
 app: {
    title: string;
    description: string;
    citationTitle: string;
    citation: string;
    apiExampleTitle: string;
    apiExample: string;
  };
}

const ModelIntroductionCard: React.FC<ModelIntroductionCardProps> = ({ app }) => {
  const [activeTab, setActiveTab] = useState('description');

  const renderContent = () => {
    switch (activeTab) {
      case 'description':
        return (
          <div className="model-introduction-card-content">
            <h2>模型介绍</h2>
            <p>{app.description}</p>
            <h2>{app.citationTitle}</h2>
            <p>{app.citation}</p>
          </div>
        );
      case 'api':
        return (
          <div className="model-introduction-card-content">
            <h2>{app.apiExampleTitle}</h2>
            <p>{app.apiExample}</p>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="model-introduction-card">
      <div className="model-introduction-card-header">
        <button
          className={`model-introduction-card-tab ${activeTab === 'description' ? 'active' : ''}`}
          onClick={() => setActiveTab('description')}
        >
          模型介绍
        </button>
        <button
          className={`model-introduction-card-tab ${activeTab === 'api' ? 'active' : ''}`}
          onClick={() => setActiveTab('api')}
        >
          API调用示例
        </button>
      </div>
      {renderContent()}
    </div>
  );
};

export default ModelIntroductionCard;
